<template>
    <div>
      <!-- 变更方法push()
  pop()
  shift()
  unshift()
  splice()
  sort()
  reverse()  这几个方法可以改变原数组，不能用不能改变原数组的方法，如果要用，可以替换。-->
      <h4>电影列表</h4>
      <ul>
        <li v-for="item in movies" :key="item.id">
          {{ item.name }}
        </li>
      </ul>
      <input type="text" v-model="newMovie" />
      <button @click="addMovie">添加电影到后面</button>
      <button @click="addMovie2">添加电影到前面</button>
      <button @click="removeMovie">删除后面电影</button>
      <button @click="removeMovie2">删除前面电影</button>
      <button @click="spliceMovie">splice插入电影</button>
      <button @click="sortMovie">sort排序操作电影</button>
      <button @click="reverseMovie">reverse反转数组操作电影</button>
      <button @click="filterMovie">filter数组替换数组电影</button>
      <hr />
      <h4>当你利用索引直接设置一个项时,数组无效</h4>
      <button @click="setMovie">索引直接设置</button>
      <h4>当你修改数组的长度时,无效</h4>
      <button @click="setMovie2">修改数组的长度</button>
      <hr />
      <h4>
        vue的definePrototype（访问器属性）原因，初始时就在data里面的数据会受到监听，但是当我们给响应式的对象新增属性的时候，新增的属性并不会显示到页面中；同样对于响应式的数组，增加元素、修改数组长度时，数组的变化也不会展示在页面上。
      </h4>
      <div>名字：{{ person.name }}</div>
      <div>年龄：{{ person.age }}</div>
      <button @click="addProperty">新增年龄</button>
    </div>
  </template>
  
  <!-- <script>
  export default {
    name: 'arrcheck',
    data() {
      return {
        newMovie: '',
        movies: [
          { id: 2, name: '盗梦空间' },
          { id: 1, name: '星际穿越' },
          { id: 4, name: '教父' },
          { id: 5, name: '龙猫' },
          { id: 6, name: '泰坦尼克号' },
          { id: 3, name: '大话西游' }
        ],
        person: {
          name: '张三'
        }
      }
    },
    methods: {
      addMovie() {
        if (this.newMovie == '') {
          alert('请输入电影名')
          return
        }
        this.movies.push({ id: this.movies.length + 1 + Date.now(), name: this.newMovie })
        this.newMovie = ''
      },
      addMovie2() {
        if (this.newMovie == '') {
          alert('请输入电影名')
          return
        }
        this.movies.unshift({ id: this.movies.length + 1 + Date.now(), name: this.newMovie })
        this.newMovie = ''
      },
      removeMovie() {
        this.movies.pop()
      },
      removeMovie2() {
        this.movies.shift()
      },
      spliceMovie() {
        this.movies.splice(1, 0, { id: this.movies.length + 1 + Date.now(), name: '速度与激情' })
      },
      sortMovie() {
        this.movies.sort((a, b) => {
          return a.id - b.id
        })
      },
      reverseMovie() {
        this.movies.reverse()
      },
      // 不能改变原数组的方法，只能返回一个新数组，替换
      filterMovie() {
        this.movies = this.movies.filter((movie) => movie.id % 2 === 0)
      },
      // 当你利用索引直接设置一个项时,vue2检测不到数组变动,vue3可以
      setMovie() {
        this.movies[0] = { id: this.movies.length + 1 + Date.now(), name: '少林小子' }
      },
      // 当你直接修改数组的长度时，vue2检测不到数组变动，vue3可以
      setMovie2() {
        this.movies.length = 1
      },
      // vue2向响应式对象中添加一个新的属性，没响应。vue3可以
      addProperty() {
        this.person.age = 30
      }
    }
  }
  </script>
   -->
  <script setup>
  defineOptions({
    name: 'arrcheck'
  })
  import { ref, reactive } from 'vue'
  const newMovie = ref('')
  let movies = reactive([
    { id: 2, name: '盗梦空间' },
    { id: 1, name: '星际穿越' },
    { id: 4, name: '教父' },
    { id: 5, name: '龙猫' },
    { id: 6, name: '泰坦尼克号' },
    { id: 3, name: '大话西游' }
  ])
  const person = reactive({
    name: '张三'
  })
  function addMovie() {
    if (newMovie.value == '') {
      alert('请输入电影名')
      return
    }
  
    movies.push({ id: movies.length + 1 + Date.now(), name: newMovie.value })
    newMovie.value = ''
  }
  function addMovie2() {
    if (newMovie.value == '') {
      alert('请输入电影名')
      return
    }
    movies.unshift({ id: movies.length + 1 + Date.now(), name: newMovie.value })
    newMovie.value = ''
  }
  function removeMovie() {
    movies.pop()
  }
  function removeMovie2() {
    movies.shift()
  }
  function spliceMovie() {
    movies.splice(1, 0, { id: movies.length + 1 + Date.now(), name: '速度与激情' })
  }
  function sortMovie() {
    movies.sort((a, b) => {
      return a.id - b.id
    })
  }
  function reverseMovie() {
    movies.reverse()
  }
  // 不能改变原数组的方法，只能返回一个新数组，替换
  function filterMovie() {
    let filterMovies = movies.filter((movie) => {
      console.log('movie: ', movie)
      return movie.id % 2 === 0
    })
    console.log('filterMovies: ', filterMovies)
    movies.length = 0
    movies = Object.assign(movies, filterMovies)
    console.log('movies: ', movies)
  }
  // 当你利用索引直接设置一个项时,vue2检测不到数组变动,vue3可以
  function setMovie() {
    movies[0] = { id: movies.length + 1 + Date.now(), name: '少林小子' }
  }
  // 当你直接修改数组的长度时，vue2检测不到数组变动，vue3可以
  function setMovie2() {
    movies.length = 1
  }
  // vue2向响应式对象中添加一个新的属性，没响应。vue3可以
  function addProperty() {
    person.age = 30
  }
  </script>
  